<template>
	<div class="thePage">
		<div class="pg-titie">实习日记管理</div>
		<div class="student-teacher">
			<div class="studentName">{{studentName}}</div>
			<div class="teacherName">教师：{{teacherName}}</div>
		</div>
		<div class="line"></div>
		<!-- 日志列表 -->
		<div class="list">
			<div class="item-box" v-for="(item,i) in listData" :key="i">
				<div class="title-diary van-ellipsis">{{item.title}}</div>
				<div class="main-diary">
					<div class="content-diary">{{item.content}}</div>
					<div class="comment-diary" v-if="item.comment">教师评语：{{item.comment}}</div>
				</div>
				<div class="bottom-diary">
					<div class="dtUpdate">{{item.dtUpdate}}</div>
					<div>
						<i class="iconfont icon-bianji"></i>
						<i class="iconfont icon-shanchu1"></i>
					</div>
				</div>
			</div>
			<div class="row-add">
				<div class="btn-add">+</div>
			</div>

		</div>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				studentName: "张四四",
				teacherName: "龚琼花",
				listData: [{
						title: "专升本专升本专升本专升本专升本专升本专升本专升本专升本专升本专升本",
						content: "第一天上班，感觉蛮简便的，所做的事情就熟悉一些工作章程，人员的一些职责，整理一些人员资料，大致上熟悉工作......",
						comment: "",
						dtUpdate: "2020-7-02",
					},
					{
						title: "常忙碌以及充实的非常忙碌以及...",
						content: "第一天上班，感觉蛮简便的，所做的事情......",
						comment: "虽然你已经取得了可喜的成绩，可是，你还有很大的潜力。只要你继续发挥自身潜力，向着更高更强的目标奋斗，你就会拥有光辉灿烂的明天！ ",
						dtUpdate: "2020-7-02",
					},
					{
						title: "专升本222",
						content: "第一天上班，感觉蛮简便的，所做的事情就熟悉一些工作章程，人员的一些职责，整理一些人员资料，大致上熟悉工作......",
						comment: "",
						dtUpdate: "2020-6-15",
					},
				],
			}
		}
	}
</script>

<style lang="less" scoped>
	.pg-titie {
		height: 60px;
		background: #FFB651;
		font-weight: bold;
		font-size: 24px;
		color: #FFFFFF;
		text-align: center;
		line-height: 60px;
	}

	.student-teacher {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		height: 60px;

		.studentName {
			padding: 20px;
			height: 20px;
			font-weight: 500;
			font-size: 22px;
			color: #000000;
			line-height: 20px;
		}

		.teacherName {
			height: 12px;
			font-size: 16px;
			line-height: 12px;
			color: #1B1B1B;
			padding-right: 20px;
		}
	}

	.line {
		margin: 0px 20px;
		height: 1px;
		background: #E5E5E5;
	}

	.item-box {
		margin: 20px;
		padding: 10px;
		background: #FFFFFF;
		box-shadow: 0px 0px 9px 1px rgba(255, 203, 130, 0.3);
		border-radius: 5px;

		.title-diary {
			height: 15px;
			font-weight: bold;
			font-size: 12px;
			color: #000000;
			line-height: 15px;
		}

		.main-diary {
			background: #FFFFFF;
			box-shadow: 0px 0px 9px 1px rgba(255, 203, 130, 0.3);
			border-radius: 5px;
			margin: 10px 0px;

			.content-diary {
				padding: 10px;
				font-size: 10px;
				color: #3A3A3A;
				line-height: 14px;
			}

			.comment-diary {
				padding: 0 10px 10px 10px;
				font-weight: bold;
				font-size: 10px;
				color: #000000;
			}
		}

		.bottom-diary {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;

			.dtUpdate {
				font-size: 12px;
				font-weight: 300;
				color: #626262;
			}

			i {
				color: #FD8A23;
				font-size: 18px;
				padding-right: 10px;
			}
		}
	}

	.row-add {
		display: flex;
		justify-content: end;
		padding: 0px 10px 10px 10px;
	}

	//加号增加按钮样式(圆形 黄底白字 )
	.btn-add {
		margin: -20px 10px 0 0;
		width: 50px;
		height: 50px;
		box-shadow: 1px 1px 10px 2px rgba(255, 182, 90, 0.59);
		border-radius: 25px;
		background: #FE921E;
		color: white;
		font-size: 50px;
		text-align: center;
		line-height: 50px;
	}
</style>